<template>
  <div class="app">
    <router-view/>
    <van-nav-bar
    title="修改地址"
    left-text="返回"
    right-text="..."
    left-arrow
    @click-left="$router.go(-1)"
      />

    <!-- <span>联系人</span> -->
    <van-form validate-first >
  <!-- 校验姓名 -->
  <van-field
    v-model="value1"
    name="pattern"
    placeholder="姓名"
    label="联系人"
    :rules="[{ pattern, message: '姓名格式不正确' }]"
  />
  <p class="biao">
    <span class="sex man">先生</span><span class="sex">女士</span>
  </p>
    
  <!-- 校验手机号码 -->
  <van-field
    v-model="value2"
    name="phonenumber"
    placeholder="手机号码"
    label="电话"
    :rules="[{ phonenumber, message: '请输入正确的手机号码' }]"
  />
  
  <!-- 校验收货地址 -->
  <van-field
    v-model="value3"
    name="address"
    placeholder="选择收货地址"
    label="地址"
    :rules="[{ address, message: '请选择正确的收货地址' }]"
  />
  <van-field
    v-model="value4"
    name="validator"
    placeholder="例：5号楼203室"
    label="补充说明"
    :rules="[{ message: '补充说明一下' }]"
  />
  <p class="biao">
    <span class="sex home">家</span>
    <span class="sex school">学校</span>
    <span class="sex">公司</span>
  </p>
  <div style="margin: 16px;" class="btn">
    <van-button square type="primary" color="red" @click="del">删除</van-button>
    <van-button square type="primary" @click="enter">确定</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
import {Toast} from 'vant'
import {address_del} from '../utils/service'
import {mapState,mapActions} from 'vuex'

export default {
data(){
    return{
        value1:this.$route.query.name,
        value2:this.$route.query.phone,
        value3:this.$route.query.address,
        value4:"",
        addressid:this.$route.query.addressid,
        pattern: /^(?:[\u4e00-\u9fa5·]{2,16})$/,
      phonenumber:/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
      address:/^浙江|上海|北京|天津|重庆|黑龙江|吉林|辽宁|内蒙古|河北|新疆|甘肃|青海|陕西|宁夏|河南|山东|山西|安徽|湖北|湖南|江苏|四川|贵州|云南|广西|西藏|江西|广东|福建|台湾|海南|香港|澳门$/
    }
},
methods:{
  ...mapActions(['request_edit']),
    del(){
        var userid = JSON.parse(localStorage.getItem('userinfo')).id
        address_del({userid,addressid:this.addressid}).then((res)=>{
        console.log(res.data)
        if(res.data.code==200){
            Toast.success("删除成功")
            var index=this.addresslist.findIndex((item)=>{
              return item.id==this.addressid
            })
            if(index!=-1){
              this.addresslist.splice(index,1)
            }
            this.$router.push('/address')
        }
        })
    },
    add(){
      console.log('111')
    },
    enter(){
      this.request_edit(this.$route.query)
    }
},

computed:{
...mapState(['addresslist'])
}
}
</script>

<style scoped>
.sex {
    display: inline-block;
    font-size: 13px;
    padding: 2px 20px;
    border: 1px solid #c8c9cc;
    border-radius: 4px;
}
.man {
    margin: 0 10px 0 112px;
}
.biao {
    padding: 8px 0;
}
.title {
    color: #555;
    font-size: 14px;
    margin: 0 66px 0 16px;
}
.school {
    margin: 0 16px;
}
.home {
    margin-left: 112px;
}
.btn {
    display: flex;
    justify-content: space-between;
}
.btn button {
    width: 152px;
}
</style>